<template>
	<el-container>
		<div class="right-panel">
			<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">时间范围:</span>
					<el-date-picker
						v-model="search.timeHorizon"
						type="daterange"
						range-separator="-"
						start-placeholder="起始时间"
						end-placeholder="截止时间"
						:size="size"
						style="margin-left: 20px"
					/>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">活动单号:</span>
					<el-input
						v-model="search.activityNumber"
						placeholder="请输入活动单号"
						style="margin-left: 20px; width: 180px"
						clearable
					></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">活动状态:</span>
					<el-select
						v-model="search.activityStatus"
						placeholder="全部"
						style="width: 180px; margin-left: 20px"
						clearable
					>
						<el-option label="执行中" :value="0"></el-option>
						<el-option label="已结束" :value="1"></el-option>
					</el-select>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">申请片区:</span>
					<el-input
						v-model="search.area"
						placeholder="请输入申请片区"
						style="margin-left: 20px; width: 180px"
						clearable
					></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">所属场景部:</span>
					<el-select
						v-model="search.sceneDepartment"
						placeholder="全部"
						style="width: 180px; margin-left: 20px"
						clearable
					>
						<el-option label="执行中" :value="0"></el-option>
						<el-option label="已结束" :value="1"></el-option>
					</el-select>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">活动类型:</span>
					<el-select v-model="search.type" placeholder="全部" style="width: 180px; margin-left: 20px" clearable>
						<el-option label="执行中" :value="0"></el-option>
						<el-option label="已结束" :value="1"></el-option>
					</el-select>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">工具包名:</span>
					<el-select v-model="search.packageName" placeholder="全部" style="width: 180px; margin-left: 20px" clearable>
						<el-option label="执行中" :value="0"></el-option>
						<el-option label="已结束" :value="1"></el-option>
					</el-select>
				</div>
				<div class="panel-search-box">
					<el-button type="primary" style="margin-left: 50px" @click="upsearch">查询</el-button>
					<el-button type="" @click="upsearchClearable">清空</el-button>
				</div>
			</div>
		</div>
		<el-header style="display: none"> </el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				:params="params"
				stripe
				remoteSort
				remoteFilter
				@selection-change="selectionChange"
			>
				<el-table-column type="selection" width="50"></el-table-column>

				<el-table-column label="申请片区" prop="region" align="center" width="180"></el-table-column>
				<el-table-column label="活动单号" prop="activityNumber" align="center" width="180"></el-table-column>
				<el-table-column label="活动名称" prop="activityName" align="center" width="180"></el-table-column>
				<el-table-column label="申请人" prop="applicant" align="center" width="180"></el-table-column>
				<el-table-column label="所属场景部" prop="sceneDepartment" align="center" width="180"></el-table-column>
				<el-table-column label="活动类型" prop="activityType" align="center" width="180"></el-table-column>
				<el-table-column label="工具包名称" prop="toolkitName" align="center" width="180"></el-table-column>
				<el-table-column label="活动执行状态" prop="activityStatus" align="center" width="180"></el-table-column>
				<el-table-column label="活动时间" prop="activityTime" align="center" width="180"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="180">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_show(scope.row)">查看活动详情 </el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<el-drawer
		v-model="dialog.info"
		:size="860"
		title="活动详情"
		:with-header="false"
		custom-class="drawerBG"
		direction="rtl"
		destroy-on-close
	>
		<info ref="infoDialog"></info>
	</el-drawer>
</template>

<script>
import info from './info.vue'

export default {
	name: 'activityExec',
	components: {
		info
	},
	data() {
		return {
			dialog: {
				info: false
			},
			tasksVisible: false,
			search: {},
			apiObj: this.$API.activity.ActivitySup.ActivityExec.list,
			params: {}
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val)
		}
	},

	mounted() {},
	async created() {},
	methods: {
		//表格内开关
		async changeSwitch(val, row) {
			row.enable = row.enable === 1 ? 0 : 1
			row.$switch_status = true
			let data = {
				enable: val,
				staffNumber: row.staffNumber
			}
			var res = await this.$API.user.user.enable.post({data:data})
			if (res && res.code === 0) {
				setTimeout(() => {
					delete row.$switch_status
					row.enable = val
					// console.log(typeof val, row)
					this.$message.success('操作成功')
				}, 500)
			}
		},

		//查看
		table_show(row) {
			this.dialog.info = true
			this.$nextTick(() => {
				this.$refs.infoDialog.setData(row)
			})
		},

		upsearch() {
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode === 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode === 'edit') {
				this.$refs.table.tableData
					.filter((item) => item.id === data.id)
					.forEach((item) => {
						Object.assign(item, data)
					})
			}
		}
	}
}
</script>

<style>
.header-btn-item {
	display: flex;
}
</style>
